<template>
	<!-- 注册登录开屏页 -->
	<view class="registerlogin-container">
		<!-- 图片区 -->
		<view class="img">
			<image src="/static/register/background.png" mode="widthFix"></image>
			<view class="icon">
				<image src="/static/img/register_login/register_icon.png" mode="widthFix"></image>
			</view>
		</view>

		<!-- 协议区-没有协议先注释掉，上线审核过不了 -->
		<!-- <view class="protocols">
			<u-checkbox-group v-model="checks" @change="checkboxChange" shape="circle" size="24rpx">
				<u-checkbox label="阅读并同意" :name="1" labelSize="20rpx" labelColor="#9e9e9e">
				</u-checkbox>
			</u-checkbox-group>
			<navigator class="title" url="">《用户协议》</navigator>
		</view> -->

		<!-- 注册 -->
		<view class="btn" @tap="goRegister">注册</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 多选框的值
				checks: []
			}
		},
		methods: {

			/**
			 * 勾选用户协议
			 * @param {array} value 已勾选的多选框
			 */
			checkboxChange(value) {
				this.checks = value
			},

			/**
			 * 去注册页面
			 */
			goRegister() {
				// if (this.checks.length == 0 || this.checks.indexOf(1) == -1) return uni.showToast({
				// 	title: '请勾选并同意用户协议'
				// })
				uni.navigateTo({
					url: '/pages/register/register'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.registerlogin-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.img {
			width: 100%;
			height: 1032rpx;
			position: relative;

			>image {
				width: 100%;
			}

			.icon {
				width: 110rpx;
				height: 110rpx;
				position: absolute;
				top: 408rpx;
				right: 124rpx;

				>image {
					width: 100%;
				}
			}
		}

		.protocols {
			margin-top: 226rpx;
			margin-left: 174rpx;
			display: flex;
			align-items: center;

			.title {
				font-size: 20rpx;
				color: #275BA8;
			}
		}

		.btn {
			width: 480rpx;
			height: 108rpx;
			background: #275BA8;
			border-radius: 999rpx;
			font-size: 40rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 58rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx auto 0;
		}


	}
</style>